﻿/*******************************************************************************
 * Copyright (c) 2016, Institute for Pervasive Computing, ETH Zurich.
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 * 3. Neither the name of the Institute nor the names of its contributors
 *    may be used to endorse or promote products derived from this software
 *    without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE INSTITUTE AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 * ARE DISCLAIMED.  IN NO EVENT SHALL THE INSTITUTE OR CONTRIBUTORS BE LIABLE
 * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS
 * OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
 * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY
 * OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
 * SUCH DAMAGE.
 * 
 * This file is part of the Copper (Cu) CoAP user-agent.
 ******************************************************************************/
 
/* General Settings and Classes */
html
{
	font-family: sans-serif;
}

label 
{
	display: inline-block;
	max-width: 100%;
	font-weight: bold;
}

img {
    vertical-align: middle;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
   min-width: 0;
   min-height: 0;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
	display: block;
	font-family: sans-serif;
	color: #333333;
	font-size: 12px;
	background-color: #eee;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.42857;
}

button
{
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}

.white 
{
	background-color: white;
}

.red
{
	background-color: red;
}

.border_solid
{
	border: 1px black solid;
}

/* Flex Boxes */
.vbox {
	display: flex;
	flex-direction: column;
}

.hbox {
	display: flex;
	flex-direction: row;
}

.flex, .flex-filler{
	flex: 1;
}

.hidden {
	visibility : hidden;
}

.invalid_input {
	background-color: rgba(255,0,0,0.6);
}

/* Tables */
.table {
	position: relative;
	overflow: hidden;
	margin: 4px;
	border: 1px black solid;
	display: flex;
	flex-direction: row;
}

.table-head-scrollbar{
	position: absolute;
	right: 0;
	top: 0;
	min-height: 18px;
	height: 18px;
	width: 17px;
	background-color: #aaa;
}

.table-head {
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	right: 17px;
	min-height: 18px;
	height: 18px;
	background-color: #aaa;
}

.no-scroll .table-head{
	right: 0;
}

.table-head > span{
	display: inline-block;
	vertical-align: middle;
	overflow-x: hidden;
	padding-left: 4px;
	padding-top: 1px;

	font-weight: bold;
}

.table-body {
	position: absolute;
	top: 18px;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	overflow-y: scroll;
}

.no-scroll .table-body{
	overflow-y: hidden;
}

.table-body-row {
	display: flex;
	align-items: center;
}

.table-body-row > span
{
	display: inline-block;
	vertical-align: middle;
	overflow-x: hidden;
	padding-left: 4px;
	padding-top: 1px;
}

/* Others */
.no-wrap
{
	white-space: nowrap;
}

/* Resizing */
.x-right-resizer {
	position: absolute;
	right: -5px;
	width: 10px;
	height: 100%;
	cursor: e-resize;
}

.y-top-resizer {
	position: absolute;
	top: -5px;
	width: 100%;
	height: 10px;
	cursor: n-resize;
}

.xy-bottom-left {
	position: relative;
	left: -10px;
	bottom: -10px;
	width: 20px;
	height: 20px;
	cursor: sw-resize;
}

.y-collapser {
	position: absolute;
	width: 49px;
	height: 8px;
	cursor: pointer;
	background: #ededed;
	border: 1px outset rgba(0,0,0,0.4);
	left: 46%;
}

.y-collapser span {
	position: absolute;
	height: 8px;
	left: 4px;
	top: -5px;
}

.y-collapser-top {
	top: 0;
}

.y-collapser-bottom {
	bottom: 0;
}

.x-collapser {
	position: absolute;
	width: 8px;
	height: 49px;
	cursor: pointer;
	background: #ededed;
	border: 1px outset rgba(0,0,0,0.4);
	top: 46%;
}

.x-collapser span {
	position: absolute;
	left: -2px;
	top: -2px;
}

.x-collapser-right {
	right: 0;
}

.x-collapser-left {
	left: 0;
}

.container-for-collapser .hidden{
	display: none;
}

.striped-background {
	background-image: linear-gradient(
			to right top,
			transparent 46%,
			rgba(0,0,0,0.2),
			rgba(0,0,0,0.2),
			transparent 55%
	);
	background-size: 3px 3px;
}


/* Container */
.main-container
{
	position: absolute;
	width: 100%;
	min-width: 980px;
	height: 100%;
	min-height: 600px;
	overflow: hidden;
}

/* Toolbar */
.main-toolbar {
	overflow: hidden;
	height: 35px;
	width: 100%;
	border-top: 1px black solid;
	border-bottom: 1px black solid;
}

.main-toolbar .toolbar-item
{
	display: inline-block;
	height: 100%;
}

.main-toolbar .border-right
{
	border-right: 1px black solid;
}

.main-toolbar button
{
	border-radius: 0px;
	border-width: 0px;
	border-color: black;
	background-color: #eee;
	color: black;
	height: 100%;
	font-size: 13px;
	padding-right: 5px;
	padding-left: 5px;
}

.main-toolbar button:not(.no-hover):hover {
	background-color: #ddd;
}

.toolbar-item-dropdown button > p {
    padding-left: 5px;
}

.toolbar-item-dropdown button:focus {
	outline: none;
}

.toolbar-item-dropdown .focused {
    background-color: #ddd;
}

.toolbar-item-dropdown .dropdown-content {
	position: absolute;
    padding: 2px;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.2);
    z-index: 5;
}

.toolbar-item-dropdown .dropdown-content p{
	padding-right: 10px;
}

.toolbar-item-dropdown .separation-line
{
	border-bottom: 1px solid rgba(0,0,0,0.2);
	margin: 2px 0px;
}


.toolbar-item-dropdown .dropdown-item {
    cursor: pointer;
    position: relative;
}

.toolbar-item-dropdown .dropdown-item:hover {
    background: rgba(0, 188, 212, 0.7);
}

.toolbar-item-dropdown .dropdown-item p {
    height: 20px;
    padding-left: 5px;
    padding-top: 2px;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.toolbar-item-dropdown .dropdown-item span {
	position: absolute;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.toolbar-item-dropdown .select-group span {
    font-size: 170%;
    top: -4px;
    left: 6px;
}

.toolbar-item-dropdown .selection-icon {
    width: 20px;
    height: 20px;
}

.toolbar-item-dropdown .selection-icon .selected {
      background: rgba(0, 188, 212, 0.7);
}

.toolbar-item-dropdown .single-element span {
	font-size: 130%;
	top: 0px;
	left: 3px;
}

#copper-toolbar-log {
    margin-top: -17px;
    margin-right: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
}


#copper-toolbar-log p {
	-webkit-user-select: text;
	-moz-user-select: text;
}

#copper-toolbar-log:hover {
    background-color: #ddd;
}

#copper-toolbar-log-event-container {
	position: absolute;
	width: 600px;
	height: 69%;
	-moz-appearance: none;
	font-family: monospace;
	color: lightgray;
	background-color: black;
	border: 1px solid white;
	z-index: 5;
	right: 20px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	cursor: text;
}

#copper-toolbar-log-event-log {
	margin: 2px;
}

#copper-toolbar-preferences {
    margin-top: -3px;
    margin-right: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
}

#copper-toolbar-preferences:hover {
    background-color: #ddd;
}

.main-content
{
	position: absolute;
	width: 100%;
	top: 35px;
	bottom: 0;
}

.main-content > *{
	margin: 4px;
}

/* Status Box */
.main-content-top-box {
	height: 70px;
	min-height: 70px; 
	padding: 4px;
}

.main-content-top-box fieldset{
	border: 1px black solid;
	padding: 4px;
	background-color: #dddddd;
}

.main-content-top-box legend {
	font-size: 14px;
}

.main-content-top-box label
{
	margin-left: 4px;
	font-size: 20px; 
	font-weight: bold;
	overflow: hidden;
}

/* Status */
#status-label {
    height: 35px;
}
/* Tree view */
.main-content .sidebar-left 
{
	position: relative;
	width: 220px;
	min-width: 28px;
	border-right: 1px black solid;
	padding: 4px 10px 4px 4px;
}

/* Packet in */
.main-content .center-box-top{
	min-height: 102px; 
	height: 102px;
}

/* Packet header table */
#copper-packet-header
{
	min-width: 200px;
	flex: 1;
}

#copper-packet-header .packet-header-element 
{
    min-width: 40px;
    flex: 1;
}

#copper-packet-header .packet-header-value 
{
	flex: 3;
}

/* Packet options table */
#copper-packet-options
{
	min-width: 150px;
	flex: 3;
}

#copper-packet-options .packet-option
{
    min-width: 50px;
    flex: 1;
}

#copper-packet-options .packet-value
{
	min-width: 50px;
	flex: 1;
}

#copper-packet-options .packet-raw
{
	flex: 1;
}

/* Payload */
.main-content .center-box-bottom
{
	position: relative;
	padding-left: 4px;
}

.main-content .center-box-bottom > *
{
	margin: 4px;
}

.main-content .center-box-bottom h2
{
	font-size: 14px;
	padding-top: 4px;
}

.main-content .center-box-bottom .pane
{
	position: absolute;
	top: 60px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0px 4px 4px 4px;
}

.main-content .center-box-bottom .innerpane
{
	width: 100%;
	height: 100%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 4px;
	overflow: auto;
}

.main-content .center-box-bottom .visible
{
	display: block;
}

.main-content .center-box-bottom .hidden
{
	display: none;
}

#copper-payload-tab-in 
{
	font-family: monospace;
	white-space: pre-wrap;
}

#copper-payload-tab-out 
{
	font-family: monospace;
	white-space: pre-wrap;
}

/* Debug options */
.main-content .sidebar-right 
{
	width: 240px;
	border-left: 1px black solid;
	padding: 4px;
}

.main-content .sidebar-right  label {
	margin-top: 5px;
	margin-bottom: 5px;
}

.main-content .sidebar-right input:disabled {
	background: rgba(230,150,20,0.4);
	-webkit-filter: blur(2px);
	filter: blur(2px);
}


.main-content .sidebar-right .checkbox 
{
	display: inline-block;
	position: relative;
	margin-bottom: 0;
	margin-top: 5px;
}

.main-content .sidebar-right label
{
	margin-top: 10px;
}

.main-content .sidebar-right .checkbox label
{
	margin: 0;
	cursor: pointer;
	font-weight: normal;
}

.main-content .sidebar-right .checkbox input
{
	cursor: pointer;
}

.main-content .sidebar-right .checkbox label {
	margin: 0;
	padding-top: 2px;
	display: inline-block;
}

.main-content .sidebar-right p {
	margin: 0;
	margin-left: 2px;
	margin-top: 3px;
}

#copper-debug-options-reset
{
	border: 1px solid rgba(0, 0, 0, 0.3);
	background-color: #ddd;
	color: black;
	margin-left: 22px;
	height: 23px;
	padding: 0 17px;
	align-items: center;
	text-transform: none;
}


.text-input-custom {
  border:1px solid;
  padding:1px 5px 1px 1px;
  background: white;
  height: 25px;
  margin-bottom: 2px;
}

.debug-option-content-formats .text-input-custom {
	padding: 1px 0px 1px 1px;
}

.text-input-custom.error, .checkbox.error{
	color: #F00;
}

.text-input-custom input, .text-input-custom select {
  border:none;
  outline:none;
  background: transparent;
  width: 0;
}

.text-input-custom  span.reset {
  cursor:pointer;
  width: 5px;
  padding-right: 5px;
  padding-top: 2px;
  margin-left: 1px;
  font-weight:bold;
}

.text-input-custom span.error {
  cursor: help;
  width: 12px;
  margin-right: 5px;
  padding-top: 2px;
  padding-left: 2px;
}

.disabled.text-input-custom {
	background: #eee;
}

#copper-debug-options-block-options > div
{
	margin-left: 5px;
}

.main-content .add-option-button {
	position: absolute;
	left: -15px;
	width: 13px;
	height: 13px;
	top: 6px;
	cursor: help;
}

/* Coap Message Log Box */
.main-content-bottom-box 
{
	height: 220px;
	border-top: 1px black solid;
	position: relative;
}

.main-content-bottom-box h2 
{
	font-size: 14px;
	padding-left: 8px;
	padding-top: 4px;
}

.main-content-bottom-box .table 
{
	position: absolute;
	top: 25px;
	bottom: 0;
	left: 0;
	right: 0;
}

#copper-coap-message-log
{
	overflow: hidden;
}

#copper-coap-message-log .coap-message-time
{
	width: 55px;
	min-width: 55px;
}

#copper-coap-message-log .coap-message-type
{
	width: 40px;
	min-width: 40px;
}

#copper-coap-message-log .coap-message-code 
{
	width: 95px;
	min-width: 95px;
}

#copper-coap-message-log .coap-message-mid
{
	width: 65px;
	min-width: 65px;
}

#copper-coap-message-log .coap-message-token
{
	width: 90px;
	min-width: 90px;
}

#copper-coap-message-log .coap-message-options
{
	flex: 3;
	min-width: 280px;
}

#copper-coap-message-log .coap-message-payload
{
	flex: 4;
	white-space: pre-wrap;
}

#copper-coap-message-log .sent
{
	background-color: #ACF;
}

#copper-coap-message-log .received
{
	background-color: #CFC;
}

#copper-coap-message-log .unexpected
{
	background-color: #FCC;
}

#copper-overlay{
	position: fixed; 
	top: 0; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	background-color: #555;
	opacity: 0.5; 
	z-index: 100;
}

#copper-overlay-content {
	position: fixed; 
	top: 25%; 
	bottom: 25%; 
	left: 25%; 
	right: 25%; 
	background-color: #FFF; 
	opacity: 1; 
	z-index: 101; 
	border-radius: 10px; 
	padding: 20px; 
	overflow: auto; 
}

#copper-overlay-content h1{
	margin-bottom: 10px; 
	font-weight: bold; 
	font-size: 20px; 
}

#copper-overlay-content p{
	margin-bottom: 10px; 
	font-size: 14px;
}

#copper-overlay-content .error-message {
	color: red;
}

#copper-resource-tree {
    display: block;
    padding: 0 4px 0 4px;
    overflow-x: hidden;
    overflow-y: auto;
}

.tree ul{
    list-style-type: none;
    padding: 0;
    padding-bottom: 0px;
    padding-left: 10px;
    position: relative;
    overflow:hidden;
}

.tree > ul {
	list-style-type: none;
	padding: 0;
	padding-bottom: 0px;
	padding-top: 2px;
	padding-left: 10px;
	position: relative;
	overflow:hidden;
}

.tree li{
    margin: 1px 0;
    padding: 0;
    padding-left: 12px;
    position: relative;
}

.tree li::before, .tree li::after{
    content: '';
    position: absolute;
    left: -1px;
}


.tree li::before{
    border-top: 1px dotted #999;
    top: 8px;
    width: 10px;
    height: 0;
	z-index: 1;
}

.tree > ul > li::before{
    display: none;
}

.tree > ul > li::after{
    display: none;
}

/* vertical line on list items */
.tree li:after{
    border-left: 1px dotted  #999;
    height: 100%;
    width: 0px;
    top: -11px;
	z-index: 1;
    border-collapse: collapse;
}

/* hide line from the last of the first level list items */
.can_expand:last-child::after{
    height: 18px;
}

.tree img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
    margin-bottom: 2px;
}

.tree p {
	display: inline;
}

.tree p:hover {
    text-decoration: underline;
    background: rgba(0,188,212,0.2);
    cursor: pointer;
}

.can_expand > img:first-child {
    position: absolute;
    top: 2px;
    left: -7px;
    padding: 1px;
    padding: 1px;
    width: 13px;
    height: 13px;
    z-index: 2;
    background-color: white;
    cursor: pointer;
}

.tree .collapsed {
    visibility : hidden;
    height : 0px;
    width : 0px;
    margin : 0px;
    padding : 0px;
    overflow : hidden;
}

.selected {
    font-weight: bold;
    color: black;
    background: rgba(0,188,212,0.7);
}

.tree_cached {
    color: black;
}

#popup-windows .popup-container {
	width: 240px;
	border: 1px solid rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 20vh;
	left: 50vw;
	margin-left: -120px;
	background: white;
	z-index: 1000;
	box-shadow: 6px 6px 3px #888888;
}

#popup-windows .block_screen {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.6);
	z-index: 6;
;
}

#popup-windows .title {
	background: #dddddd;
	padding: 5px 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

#popup-windows .content {
	padding: 10px 10px;
}

#popup-windows fieldset {
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 4px;
	padding-bottom: 8px;
	margin-bottom: 10px;
}

#popup-windows .checkbox {
	display: inline-block;
	position: relative;
	margin-bottom: 0;
	margin-top: 5px;
}

#popup-windows .checkbox label {
	margin: 0;
	cursor: pointer;
	font-weight: normal;
}

#popup-windows .checkbox input {
	cursor: pointer;
}

#popup-windows button {
	border: 1px solid rgba(0, 0, 0, 0.3);
	background-color: #dddddd;
	color: black;
	height: 23px;
	align-items: center;
	text-transform: none;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 2%;
	margin-right: 2%;
	width: 96%;
	cursor: pointer;
}

#popup-windows .close-button {
	border: 1px solid rgba(0, 0, 0, 0.3);
	background-color: #dddddd;
	color: black;
	height: 23px;
	align-items: center;
	text-transform: none;
	margin-left: 30%;
	margin-right: 30%;
	margin-top: 15px;
	width: 40%;
}

#popup-windows button:hover {
	background-color: #e9e9e9;
}

#copper-profile-manager-container div {
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 4px;
}

#manage-profile-window img {
	height: 23px;
	width: 20px;
	padding-top: 3px;
	margin-left: 5px;
	cursor: pointer;
}

#manage-profile-window #copper-profile-manager-add-profile {
	margin-bottom: 0px;
}

#manage-profile-window .text-input-custom {
	padding: 1px;
}

#popup-windows .start-resource-access .popup-container {
	width: 530px;
	margin-left: -265px;
	top: 20vh;
}
#popup-windows .start-resource-access h1 {
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 10px;
}

#popup-windows .start-resource-access .input-box input {
	height: 25px;
	margin: 0;
	padding: 0;
}

#popup-windows .start-resource-access .input-box button {
	height: 25px;
	width: 50px;
	margin: 0 0 0 5px;
	padding: 0;
}

#popup-windows .copper-error .popup-container{
	width: 400px;
	margin-left: -200px;
	padding-bottom: 30px;
	top: 20vh;
}

#popup-windows .copper-error img {
	width: 30px;
}

#popup-windows #copper-error-msg {
	margin-left: 30px;
}

#popup-windows .copper-error .copper-error-exit-button {
	position: absolute;
	bottom: 5px;
	width: 80px;
	left: 160px;
}

#popup-windows .copper-error .copper-error-reload-button {
	position: absolute;
	bottom: 5px;
	width: 175px;
	left: 10px;
}

#popup-windows .copper-error .copper-error-back-to-resource-button {
	position: absolute;
	bottom: 5px;
	width: 175px;
	left: 195px;
}